<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <!-- 导入 JQ 库文件 -->
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1 align="center">学生列表</h1>
    <table border="1" align="center" width="80%" id="tbl">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>分数</th>
                <th>出生</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        // 页面加载时，向服务器发起异步请求，查询所有的学生信息
        $.ajax("list.do",{
            type:'get',
            dataType:'json',
            success:function( listArr ) {
                // console.log(typeof listArr)
                // console.log(listArr)
                $.each(listArr,function(i,stu){
                    var tr = $("<tr></tr>")

                    var td1 = $("<td>"+stu.name+"</td>")
                    var td2 = $("<td>"+stu.age+"</td>")
                    var td3 = $("<td>"+stu.score+"</td>")
                    var td4 = $("<td>"+stu.born+"</td>")
                    var td5 = $("<td>删除 修改</td>")

                    tr.append(td1);
                    tr.append(td2);
                    tr.append(td3);
                    tr.append(td4);
                    tr.append(td5);

                    $("#tbl tbody").append(tr);
                }) ;
            }
        }) ;





    </script>
</body>
</html>